  <template> 
	<div class="JNPF-common-layout">
		<div class="JNPF-common-layout-center">
			<el-row class="JNPF-common-search-box" :gutter="16">
				<el-form @submit.native.prevent>
					<el-col :span="6">
						<el-form-item label="风险点类型">
							<el-select v-model="query.fxdlx" placeholder="设施设备" clearable >
								<el-option v-for="(item, index) in fxdlxOptions" :key="index" :label="item.fullName" :value="item.id"  />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
						<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
					</el-form-item>
					</el-col>
				</el-form>
			</el-row>
			<div class="JNPF-common-layout-main JNPF-flex-main">
				<div class="JNPF-common-head">
					<div>
					</div>
					<div class="JNPF-common-head-right">
						<el-tooltip effect="dark" content="刷新" placement="top">
							<el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"  @click="reset()" />
						</el-tooltip>
						<screenfull :isContainer="true" />
						<el-tooltip effect="dark" content="列设置" placement="top">
							<el-link icon="icon-ym icon-ym-options JNPF-common-head-icon" :underline="false" />
						</el-tooltip>
					</div>
				</div>
				<JNPF-table v-loading="listLoading" :data="list">
					<el-table-column label="风险点类型"  prop="fxdlx" algin="left" width="90px">
						<template slot-scope="scope">{{ scope.row.fxdlx | dynamicText(fxdlxOptions) }}</template>
					</el-table-column>
					<el-table-column prop="pjff" label="评价方法" align="left" />
					<el-table-column prop="fxdid" label="风险点" align="left" />
					<el-table-column v-if="query.fxdlx == 0" prop="jcxm" label="检查项目" align="left" />
					<el-table-column v-if="query.fxdlx == 0" prop="jcbz" label="检查标准" align="left" width="120px" />
					<el-table-column v-if="query.fxdlx == 0" prop="bfhbzqk" label="不符合标准情况" align="left" width="110px" />
					<el-table-column v-if="query.fxdlx == 0 || query.fxdlx == 2" prop="zyhg" label="主要后果" align="left" width="120px" />
					<el-table-column v-if="query.fxdlx == 1" prop="zybz" label="作业步骤" align="left" width="150px" />
					<el-table-column v-if="query.fxdlx == 1" prop="wxyhqzsj" label="危险源或潜在事件" align="left" width="120px" />
					<el-table-column v-if="query.fxdlx == 1" prop="knfsdsjlxjhg" label="事故类型及后果" align="left" width="110px" />
					<el-table-column v-if="query.fxdlx == 2" prop="jd" label="节点" align="left" />
					<el-table-column v-if="query.fxdlx == 2" prop="cs" label="参数" align="left" />
					<el-table-column v-if="query.fxdlx == 2" prop="csms" label="参数描述" align="left" />
					<el-table-column v-if="query.fxdlx == 2" prop="ydc" label="引导词" align="left" />
					<el-table-column v-if="query.fxdlx == 2" prop="knyy" label="可能原因" align="left" />
					<el-table-column v-if="query.fxdlx == 2" prop="pc" label="偏差" align="left" />
					<el-table-column prop="gcjscs" label="工程技术措施" align="left">
					</el-table-column>
					<el-table-column prop="glcs" label="管理措施" align="left" />
					<el-table-column prop="pxjycs" label="培训教育措施" align="left" width="100px" />
					<el-table-column prop="gtfhcs" label="个体防护措施" align="left" width="100px" />
					<el-table-column prop="yjczcs" label="应急处置措施" align="left" width="100px" />
					<el-table-column prop="fxdj" label="风险等级" align="left">
						<template slot-scope="scope">
							<p>{{scope.row.fxdj | filterVal}}</p>
						</template>
					</el-table-column>
					<el-table-column prop="fxz" label="风险值" align="left" />
					<el-table-column label="状态"  prop="zt" algin="left">
						<template slot-scope="scope">{{ scope.row.zt | dynamicText(ztOptions) }}</template>
					</el-table-column>
					<el-table-column prop="gkcj" label="管控层级" align="left" />
					<el-table-column label="操作" fixed="right" width="150">
						<template slot-scope="scope">
							<el-button type="text" v-if="scope.row.zt == 1" disabled @click="evaluate(scope.row)" >
								评价
							</el-button>
							<el-button type="text" v-if="scope.row.zt == 0" @click="evaluate(scope.row)" >
								评价
							</el-button>
							<el-button type="text" @click="addOrUpdateHandle(scope.row.id,true)" >
								详情
							</el-button>
						</template>
					</el-table-column>
				</JNPF-table>
				<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
			</div>
		</div>
		<JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh" />
		<ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
    <Riskevaluation v-if="riskevaluation" ref="riskevaluation"  @refresh="refresh"></Riskevaluation>
	</div>

</template> 
<script>
	import request from '@/utils/request'
	import {getDictionaryDataSelector} from '@/api/systemData/dictionary'
	import JNPFForm from './Form'
	import Riskevaluation from './riskevaluation'
	import ExportBox from './ExportBox'
	import {previewDataInterface} from '@/api/systemData/dataInterface'
	import { logout } from '@/api/user'

	export default {
		name:'rick',
		components: {JNPFForm, ExportBox,Riskevaluation},
		data() {
			return {
				riskevaluation:false,
				showAll: false,
				gcjscs:{},
				query: {
					fxdlx:0,
				},
				defaultProps: {
					children: 'children',
					label: 'fullName'
				},
				list: [],
				listLoading: true,
				total: 0,
				listQuery: {
					currentPage: 1,
					pageSize: 20,
					sort: "desc",
					sidx: "",
				},
				formVisible: false,
				exportBoxVisible: false,
				columnList: [
						{prop: 'id', label: 'ID'},
						{prop: 'jhid', label: '所属计划ID'},
						{prop: 'fxdid', label: '所属风险点ID'},
						{prop: 'jcxm', label: '检查项目'},
						{prop: 'jcbz', label: '检查标准'},
						{prop: 'bfhbzqk', label: '不符合标准情况'},
						{prop: 'zyhg', label: '主要后果'},
						{prop: 'zybz', label: '作业步骤'},
						{prop: 'wxyhqzsj', label: '危险源或潜在事件'},
						{prop: 'knfsdsjlxjhg', label: '事故类型及后果'},
						{prop: 'jd', label: '节点'},
						{prop: 'cs', label: '参数'},
						{prop: 'csms', label: '参数描述'},
						{prop: 'ydc', label: '引导词'},
						{prop: 'knyy', label: '可能原因'},
						{prop: 'pc', label: '偏差'},
						{prop: 'gcjscs', label: '工程技术措施'},
						{prop: 'glcs', label: '管理措施'},
						{prop: 'pxjycs', label: '培训教育措施'},
						{prop: 'gtfhcs', label: '个体防护措'},
						{prop: 'yjczcs', label: '应急处置措施'},
						{prop: 'fxdj', label: '风险等级'},
						{prop: 'fxz', label: '风险值'},
						{prop: 'zt', label: '状态'},
						{prop: 'gkcj', label: '管控层级'},
						{prop: 'fxdlx', label: '风险点类型'},
				],
				pointOptions:[],
				fxdlxOptions:[{"fullName":"设备设施","id":"0"},{"fullName":"作业活动","id":"1"},{"fullName":"工艺节点","id":"2"}],
				ztOptions:[{"fullName":"未评价","id":"0"},{"fullName":"已评价","id":"1"}],
			}
		},
		watch: {
			'query.fxdlx'(newValue, oldValue) {
				if(newValue) {
					this.initData()
				}
			},
		},
		filters:{
			filterVal(val) {
				 if(val == 1) {
					return '重大风险'
        } else if(val == 2) {
					return '较大风险'
        } else if(val == 3) {
					return '一般风险'
        } else if(val == 4) {
					return '低风险'
        } else {
					return ''
        }
			}
		},
		created() {
			this.initData();
			this.query.fxdlx = this.fxdlxOptions[0].id
		},
		methods: {
			// 评价
			evaluate(row) {
				this.riskevaluation = true
				this.$nextTick(() => {
					this.$refs['riskevaluation'].init(row)
				})
			},
			// 处理数据
			dealValue(name){
				for(let i in this.list) {
					if(this.list[i]) {
						if(this.list[i][name] != undefined) {
						let a =	JSON.parse(this.list[i][name]).map(item => item.value)
							this.list[i][name] =a.toString();
						}
					}
				}
			},
			// 获取数据
			initData() {
				this.listLoading = true;
				let query = {
					...this.listQuery,
					...this.query
				};
				request({
					url: `/api/System/riskPlanpointcheck`,
					method: 'get',
					data: query
					}).then(res => {
						this.list =res.data.list
						this.dealValue('gcjscs')
						this.dealValue('glcs')
						this.dealValue('gtfhcs')
						this.dealValue('pxjycs')
						this.dealValue('yjczcs')
						this.total = res.data.pagination.total
						this.listLoading = false
						this.$nextTick(() => {
						this.tableHeight = "100%"
					});
				})
			},
			addOrUpdateHandle(id,isDetail) {
				this.formVisible = true
				this.$nextTick(() => {
					this.$refs.JNPFForm.init(id,isDetail)
				})
			},
			exportData() {
				this.exportBoxVisible = true
				this.$nextTick(() => {
					this.$refs.ExportBox.init(this.columnList)
				})
			},
			search() {
				this.listQuery = {
					currentPage: 1,
					pageSize: 20,
					sort: "desc",
					sidx: "",
				}
				this.initData()
			},
			refresh(isrRefresh) {
				this.formVisible = false
				if (isrRefresh) this.reset()
			},
			reset() {
				for (let key in this.query) {
					this.query[key] = undefined
				}
				this.listQuery = {
					currentPage: 1,
					pageSize: 20,
					sort: "desc",
					sidx: "",
				}
				this.query = {
					fxdlx:this.fxdlxOptions[0].id
				},
				this.initData()
			}
		}
	}
</script>